<template>
  <slide-view
    v-empty="!canShowDetail"
    :listener-ids="listenerIDs"
    :no-listener-ids="noListenerIDs"
    :no-listener-class="noListenerClass"
    :body-style="{padding: 0, height: '100%'}"
    xs-empty-icon="nopermission"
    :xs-empty-text="$t('crm.marketing.7f2d5ce202f347040a243074d57e5d64')"
    class="d-view"
    @afterEnter="viewAfterEnter"
    @close="hideView">
    <div ref="crmDetailMain" v-loading="loading" class="detail-main no-padding">
      <flexbox
        v-if="canShowDetail && detailData"
        direction="column"
        align="stretch"
        class="d-container">
        <wk-detail-header
          :subtitle="$t('crm.marketing.4e37c73b1ce1c9ab1b1f512b090d9d58')"
          :class="{'is-shadow': bodyIsScroll}"
          :title="detailData.marketingName"
          :page-list="pageList"
          :dropdowns="handleOperations"
          @command="headerRightClick"
          @pageChange="pageChange">
          <template slot="right">
            <time-piece v-if="showTimer && isCall" />
            <el-button
              v-if="showEdit"
              class="head-handle-button"
              type="primary"
              @click="headerRightClick('edit')">
              {{ $t('crm.marketing.33c5b9c5dfdfbea6f48c304172f7727f') }}
            </el-button>
          </template>
        </wk-detail-header>

        <div class="d-container-body" @scroll="bodyScroll">
          <detail-head-base :list="headDetails" />
          <el-tabs v-model="tabCurrentName" nav-mode="more">
            <el-tab-pane
              v-for="(item, index) in tabNames"
              :key="index"
              :label="item.label"
              :name="item.name"
              lazy>
              <c-r-m-base-info
                v-if="item.name === 'CRMBaseInfo'"
                :id="id"
                :detail="detailData"
                :filed-list="baseDetailList"
                crm-type="marketing">
                <wk-head-section
                  :label="$t('crm.marketing.5b0e295d5f91a3ad8473255ac414f296')"
                  :props="{
                    headBgColor: '#FAFBFC',
                    arrows: 'left',
                    border: false,
                    bodyPadding: '0'
                  }"
                  class="b-cells">
                  <div class="image">
                    <div v-if="mainFileList.length > 0" class="image-info">
                      <div class="image-info__label">
                        {{ $t('crm.marketing.f95602447f9dc5a591d2e44c2951823b') }}
                      </div>
                      <div class="image-info__list">
                        <img
                          v-for="(mItem, mIndex) in mainFileList"
                          :key="mIndex"
                          v-src="mItem.url"
                          class="main-img"
                          @click="previewImage(mainFileList, mIndex)">
                      </div>
                    </div>
                    <div v-if="detailFileList.length > 0" class="image-info">
                      <div class="image-info__label">
                        {{ $t('crm.marketing.2ff61cd19968b1e78c7635d0eb50bd64') }}
                      </div>
                      <div class="image-info__list">
                        <img
                          v-for="(dItem, dIndex) in detailFileList"
                          :key="dIndex"
                          v-src="dItem.url"
                          class="detial-img"
                          @click="previewImage(detailFileList, index)">
                      </div>
                    </div>
                    <div
                      v-if="detailFileList.length == 0 && mainFileList.length == 0"
                      class="no-img">
                      {{ $t('crm.marketing.dfab31b7ef8957b54a02ce23bb0ae58c') }}
                    </div>
                  </div>
                </wk-head-section>
              </c-r-m-base-info>
              <component
                :is="item.name"
                v-else
                :id="id"
                :detail="detailData"
                :filed-list="baseDetailList"
                crm-type="marketing" />
            </el-tab-pane>
          </el-tabs>
        </div>
      </flexbox>
    </div>

    <!-- 新建编辑 -->
    <create
      v-if="crmCreateShow"
      :action="createActionInfo"
      @save-success="editSaveSuccess"
      @hiden-view="crmCreateShow=false" />
  </slide-view>
</template>

<script>
import {
  crmMarketingReadAPI,
  crmMarketingDeleteAPI,
  crmMarketingIsEnableAPI
} from '@/api/crm/marketing'

import SlideView from '@/components/SlideView'
import CRMBaseInfo from '../components/CRMBaseInfo' // 基本信息
import Overview from './components/Overview'
import Statistics from './components/Statistics'
import Create from './components/Create'
import WkHeadSection from '@/components/NewCom/WkHeadSection'

import DetailMixin from '../mixins/Detail'

export default {
  // 客户管理 的 活动详情
  name: 'MarketingDetail',

  components: {
    SlideView,
    CRMBaseInfo,
    Overview,
    Statistics,
    Create,
    WkHeadSection
  },

  mixins: [DetailMixin],

  props: {
    // 详情信息id
    id: [String, Number],
    // 监听的dom 进行隐藏详情
    listenerIDs: {
      type: Array,
      default: () => {
        return ['crm-main-container']
      }
    },
    // 不监听
    noListenerIDs: {
      type: Array,
      default: () => {
        return []
      }
    },
    noListenerClass: {
      type: Array,
      default: () => {
        return ['el-table__body']
      }
    }
  },

  data() {
    return {
      loading: false, // 展示加载loading
      crmType: 'marketing',
      detailData: {}, // read 详情
      baseDetailList: [], // 基本详情list
      headDetails: [],
      tabCurrentName: 'Overview'
    }
  },

  computed: {
    // 可操作选项
    handleOperations() {
      return this.getOperations([
        'state_start',
        'state_disable',
        'delete'])
    },

    // tabs
    tabNames() {
      const tempsTabs = []
      tempsTabs.push({ label: this.$t('crm.marketing.4ec8972fdd56bab1a6b5a22b0c857577'), name: 'Overview' })
      tempsTabs.push({ label: this.$t('crm.marketing.1ebc35813531d384f6ca6557a968a279'), name: 'CRMBaseInfo' })
      tempsTabs.push({ label: this.$t('crm.marketing.5345a01e812d1d729c14533617cfd2fa'), name: 'Statistics' })
      return tempsTabs
    },
    mainFileList() {
      if (this.detailData && this.detailData.mainFileList) {
        return this.detailData.mainFileList
      }

      return []
    },

    detailFileList() {
      if (this.detailData && this.detailData.detailFileList) {
        return this.detailData.detailFileList
      }

      return []
    }
  },

  mounted() {},

  methods: {
    /**
     * @description: 详情
     * @param {*}
     * @return {*}
     */
    getDetial() {
      this.loading = true
      crmMarketingReadAPI({
        marketingId: this.id
      })
        .then(res => {
          this.loading = false
          const resData = res.data || {}
          this.detailData = resData
          this.getBaseList(resData)

          this.headDetails = [
            { title: this.$t('crm.marketing.709f6f02499a4710130a2d1d71477a6d'), value: resData.crmTypeName },
            { title: this.$t('crm.marketing.633c4fb8e8bccd823ee1c1c3cf635422'), value: resData.status == 1 ? this.$t('crm.marketing.29da1a025db1e0072da509e1af939669') : this.$t('crm.marketing.03c7a13c2ace8cea4a728ed510b593f4') },
            { title: this.$t('crm.marketing.d748f6c02e4e6ba684f5e8d1cf3dfe1e'), value: resData.createUserInfo ? resData.createUserInfo.realname : '', formType: 'user' },
            { title: this.$t('crm.marketing.2e015af5342fef1f4363d815590ed6cb'), value: resData.endTime }
          ]
        })
        .catch(() => {
          this.loading = false
        })
    },

    /**
     * 获取基本信息数据
     */
    getBaseList(data) {
      this.baseDetailList = [
        {
          name: this.$t('crm.marketing.dfb1151a2cebdd415e8f8eafddf2e478'),
          list: [
            {
              name: this.$t('crm.marketing.75312bab7585dbeaa45aa85c17ed3e02'),
              formType: 'text',
              value: data.marketingName
            },
            {
              name: this.$t('crm.marketing.1cab9445760a268453d502689910bde7'),
              formType: 'text',
              value: data.crmTypeName
            },
            {
              name: this.$t('crm.marketing.f574a426b7af43147cec3c7a1462b406'),
              formType: 'userDep',
              value: {
                users: (data.relationUserInfo || []),
                depts: (data.relationDeptInfo || [])
              }
            },
            {
              name: this.$t('crm.marketing.370dbb3fd1cde56e8143cbae52436f93'),
              formType: 'text',
              value: data.marketingType
            },
            {
              name: this.$t('crm.marketing.7f8bc51babfcd7d6be94c93be2e9faa5'),
              formType: 'text',
              value: data.startTime
            },
            {
              name: this.$t('crm.marketing.aa84d47f08564a6bd64c0a4099a22e56'),
              formType: 'text',
              value: data.endTime
            },
            {
              name: this.$t('crm.marketing.5bf7e87098f98b9ddb820ba3668c1809'),
              formType: 'text',
              value: data.browse
            },
            {
              name: this.$t('crm.marketing.7b6280b86b159db726cc99f371eea789'),
              formType: 'text',
              value: data.submitNum
            },
            {
              name: this.$t('crm.marketing.abcb560ba2565bf5dc801f35c34a0ce7'),
              formType: 'text',
              value: data.marketingMoney
            },
            {
              name: this.$t('crm.marketing.9f4269f4ba76ea036fcfed6738f8b023'),
              formType: 'text',
              value: data.address
            },
            {
              name: this.$t('crm.marketing.e74214b1f88ac565dba6111caa29653c'),
              formType: 'text',
              value: data.synopsis
            },
            {
              name: this.$t('crm.marketing.42b3b4349d8e165cdce5ac8fcd8d386b'),
              formType: 'text',
              value: data.status == 1 ? this.$t('crm.marketing.87568c97bab56ac5fe27103f17df3d31') : this.$t('crm.marketing.4d3a58c7e8f75c2b8f21d9a1df2e0d14')
            },
            {
              name: this.$t('crm.marketing.04434c452484be557770fe88ada83f1a'),
              formType: 'single_user',
              value: data.createUserInfo ? {
                realname: data.createUserInfo.realname
              } : ''
            },

            {
              name: this.$t('crm.marketing.e1f4d78d3ff0c2512b22fb705dcfafd5'),
              formType: 'text',
              value: data.createTime
            },
            {
              name: this.$t('crm.marketing.07730d4d132fa4bdd00e347874897ea1'),
              formType: 'text',
              value: data.updateTime
            }
          ]
        }
      ]
    },

    /**
     * 关闭
     */
    hideView() {
      this.$emit('hide-view')
    },

    /**
     * 预览图片
     */
    previewImage(list, index) {
      this.$wkPreviewFile.preview({
        index: index,
        data: list
      })
    },

    /* ------------------------ 头部事件 ------------------------ */
    /**
     * @description: 头部右侧点击事件
     * @param {*}
     * @return {*}
     */
    headerRightClick(type) {
      if (type === 'edit') {
        this.createCRMType = this.crmType
        this.createActionInfo = {
          type: 'update',
          id: this.id,
          detail: this.detailData
        }
        this.crmCreateShow = true
      } else if (type == 'delete') {
        this.$confirm(
          this.$t('crm.marketing.f5d209d9ec23de22c5005ab50dfaab29'),
          this.$t('crm.marketing.fc41cc351b780d3e6d8b5669e1d1ba84'),
          {
            confirmButtonText: this.$t('crm.marketing.d959e27a8c167cd5bd003a0eba4901a9'),
            cancelButtonText: this.$t('crm.marketing.0b8cb7e9cb01bf1bf3f39acb983c0b1a'),
            type: 'warning'
          }
        )
          .then(() => {
            crmMarketingDeleteAPI([this.id])
              .then(res => {
                this.$message({
                  type: 'success',
                  message: this.$t('crm.marketing.3b89de2ec5c163ce5dcd5d9bec7a78ff')
                })
                this.detailHeadHandle({ type })
              })
              .catch(() => {})
          })
          .catch(() => {})
      } else if (type === 'state_start' || type === 'state_disable') {
        this.$confirm({
          state_start: '确定要启用该活动吗?',
          state_disable: '确定要停用该活动吗?'
        }[type], this.$t('crm.marketing.e18e361bdbb692f27a314f9c9ccd1db7'), {
          confirmButtonText: this.$t('crm.marketing.e350fcf35e775217f87735713f859267'),
          cancelButtonText: this.$t('crm.marketing.8b9173982e4778e83435fc8d1d1a12cb'),
          type: 'warning'
        })
          .then(() => {
            crmMarketingIsEnableAPI({
              marketingIds: this.id,
              status: type === 'state_start' ? 1 : 0
            })
              .then(res => {
                this.$message({
                  type: 'success',
                  message: this.$t('crm.marketing.d17ca7bc321ecd558a402e321ced7f60')
                })
                this.detailHeadHandle({ type })
              })
              .catch(() => {})
          })
          .catch(() => {})
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../styles/crmdetail.scss";
@import "../styles/detailview.scss";

.d-container-body {
  margin-top: 8px;
}

.image {
  color: $--color-text-primary;

  &-info {
    margin: 10px 25px 0;

    &__label {
      font-size: 13px;
    }

    &__list {
      overflow-x: auto;
      white-space: nowrap;

      img {
        margin-top: 15px;
        cursor: pointer;
        border-radius: $--border-radius-base;
      }

      img + img {
        margin-left: 20px;
      }

      .main-img {
        width: 100px;
        height: 76px;
        object-fit: contain;
        vertical-align: top;
      }

      .detial-img {
        width: 100px;
        height: 80px;
        object-fit: contain;
        vertical-align: top;
      }
    }
  }

  .no-img {
    margin: 50px 0;
    color: $--color-text-regular;
    text-align: center;
  }
}
</style>
